<template>
  <div>
    <form @submit.prevent="postData" ref="formLabel">
      <table border="1">
        <tbody>
          <tr>
            <td>
              <label for="">用户名</label>
            </td>
            <td>
              <input type="text" v-model="tempData.username">
            </td>
          </tr>
          <tr>
            <td>
              <label for="">密码：</label>
            </td>
            <td>
              <input type="password" v-model="tempData.password">
            </td>
          </tr>
          <tr>
            <td>
              <label for="">邮箱：</label>
            </td>
            <td>
              <input type="text" v-model="tempData.email">
            </td>
          </tr>
          <tr>
            <td>
              <label for="">性别：</label>
            </td>
            <td>
              <label for="">男</label>
              <input type="radio" value="男" v-model="tempData.sex">
              <label for="">女</label>
              <input type="radio" value="女" v-model="tempData.sex">
            </td>
          </tr>
          <tr>
            <td>
              <label for="">爱好：</label>
            </td>
            <td>
              <select v-model="tempData.hobby" id="">
                <option value="basketball">篮球</option>
                <option value="footbell">足球</option>
                <option value="badminton">羽毛球</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button>注册</button>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <table border="1">
      <thead>
        <th>姓名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>爱好</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in formDataArr" :key="index">
          <td>{{item.username}}</td>
          <td>{{item.password}}</td>
          <td>{{item.email}}</td>
          <td>{{item.sex}}</td>
          <td>{{item.hobby}}</td>
          <td>
            <button>编辑</button>
            <button @click="delData(index)" :index="index">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

export default {
  data(){
    return {
      formDataArr:[],
      tempData:{
        username:"",
        password:"",
        email:"",
        sex:"",
        hobby:""
      }
    }
  },
  methods:{
    postData(){
      this.formDataArr.push(this.deepClone(this.tempData));
      console.log(this.formDataArr);
      for(let i in this.tempData){
        this.tempData[i] = "";
      }
    },
    deepClone(data){
      let newObj = {};
      for(let i in data){
        newObj[i]=data[i]
      }
      return newObj
    },
    delData(ind){
      this.formDataArr.splice(ind,1);
    }
  }
}
</script>

<style>

</style>
